

      <!-- load ajax page -->
<?php
$items_per_group = 5;
$total_records=$post_record->row()->t_records;
$total_groups = ceil($total_records/$items_per_group);

?>
  <script type="text/javascript">
$(document).ready(function() {
  
  var track_load = 0; //total loaded record group(s)
  var loading  = false; //to prevents multipal ajax loads
  var total_groups = <?php echo $total_groups; ?>; //total record group(s)
  
  
  $('#results').load("<?php echo site_url('posts/view_most_read');?>", {'group_no':track_load}, function() {
    track_load++;                      // call function load post and execute code
  }); //load first group
  
  $(window).scroll(function() { //detect page scroll
    
    if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
    {
      
      if(track_load <= total_groups && loading==false) //there's more data to load
      {
        loading = true; //prevent further ajax loading
        $('.animation_image').show(); //show loading image
        
        //load data from the server using a HTTP POST request
        $.post("<?php echo site_url('posts/view_most_read');?>",{'group_no': track_load}, function(data){
                  
          $("#results").append(data); //append received data into the element

          //hide loading image
          $('.animation_image').hide(); //hide loading image once data is received
          
          track_load++; //loaded group increment
          loading = false; 
        
        }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
          
          alert(thrownError); //alert with HTTP error
          $('.animation_image').hide(); //hide loading image
          loading = false;
        
        });
        
      }
    }
  });
});
</script>
<!-- / end load ajax page -->
<section id="content">
  <!-- Docs page layout -->
  <div id="container" class="transitions-enabled infinite-scroll clearfix" style="margin-left: 0px; width: 100%">
    <div id="results">
      
    </div>
  </div>
  <!-- #container -->
  <nav id="page-nav">
    
  </nav>
  <div class="animation_image" style="display:none" align="center"><img src="<?php echo base_url().F_IMG; ?>ajax-loader.gif"></div>
  
</section>

      